<template>
  <div class="ahistory">
    <div class="a_inner">
      <img class="a_bg_7" src="../images/bg/7.png" alt="">
      <div class="a_inner_top">
        <div class="a_inner_top_title width183">
          <h1 v-text="lang.h1Text"></h1>
        </div>
      </div>
      <div class="ahistory_content" :class="{ahistory_content__en: langKey == 'en'}">
        <div 
          class="ahistory_content_item" 
          v-for="(item, index) in historyList" 
          :key="index"
          :class="[item.class]"
        >
          <h6 v-text="lang.historyList[index].time"></h6> 
          <p v-html="lang.historyList[index].htmlText"></p>
        </div>

        <!-- 黑科技 -->
        <div class="ahistory_hock"></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    lang: {
      type: Object,
    },
    langKey: String,
  },
  data () {
    return {
      historyList: [
        { class:'' },
        { class:'' },
        { class:'' },
        { class:'' },
        { class:'' },
        { class:'margin_6' },
        { class:'' },
        { class:'' },
        { class:'' },
        { class:'no_mar' },
      ]
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="stylus">

.ahistory
  padding-bottom: 150px;
  // background: url(../images/bg5.png) no-repeat center top;
  background-size: auto 1010px;
  .a_inner
    .a_bg_7
      top: 262px;
      left: -241px;
    .a_inner_top_title
      &.width183
        // width: 183px;
        margin-bottom: 40px;
    .ahistory_content
      overflow: hidden;
      position: relative;
      height: 410px;
      background: url(../images/history_arrow_b.svg), url(../images/history_arrow_t.svg);
      background-position: -60px 180px, 90px 70px;
      background-repeat: repeat-x;
      &.ahistory_content__en
        .ahistory_content_item
          h6
            margin-bottom: 10px;
      .ahistory_content_item
        position: relative;
        z-index: 1;
        float: left;
        width: 150px;
        height: 180px;
        margin-right: 90px;
        margin-bottom: 50px;
        background-image: linear-gradient(-135deg, #F7FBFF 0%, #B5DDFF 100%);
        box-shadow: inset 2px 2px 15px 0 rgba(155,244,255,0.53);
        border-radius: 10px;
        &.margin_6
          margin-left: 90px;
        &.no_mar
          margin-right: 0px;
        h6
          padding-top: 30px;
          margin-bottom: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #549AFF;
        p
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          opacity: 0.8;
    .ahistory_hock
      position: absolute;
      top: 50px;
      right: 0;
      width: 150px;
      height: 180px;
      background-color: #1f2e6b;



</style>
